<template>
  <span>{{text}}</span>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  props: ['index'],
  name: 'SubjectSpan',
  data() {
    return {
      currentIndex: null
    }
  },
  methods: {
    ...mapActions({
      loadSubjects: 'loadSubjects'
    }),
    setIndex(val) {
      if (val === this.currentIndex) return
      this.currentIndex = val
    }
  },
  watch: {
    index(val) {
      this.setIndex(val)
    }
  },
  computed: {
    ...mapGetters({
      items: 'subjects'
    }),
    text() {
      var item = null
      if (this.currentIndex) {
        item = this.items[this.currentIndex - 1]
      }
      return (item && item.name) || '未知'
    }
  },
  mounted() {
    this.setIndex(this.index)
    this.loadSubjects()
  }
}
</script>

<style>
</style>
